<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--
    这里变量isShow的数据来自vue实例里的isShow，而不是组件里的isShow
    变量用的哪个的数据，看的是现在它在哪个模板里。现在变量在实例的模板里，所以用的是实例里的数据
    它不关心你是不是写在<cpn></cpn>里面，它就把cpn看成普通的<div></div>之类的
    
    官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译
  -->
  <cpn v-show="isShow"></cpn>
</div>

<template id="cpn">
  <div>
    <h2>大都好物不坚固</h2>
    <h2>彩云易散琉璃脆</h2>
    <!-- 这里的isShow是在组件的模板里，所以用的是组件里的data里的isShow   -->
    <button v-show="isShow">按钮</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好',
      isShow:true
    },
    components:{
      cpn:{
        template:'#cpn',
        data(){
          return {
            isShow:false
          }
        }
      }
    }
  })

</script>
</body>
</html>